import {Menu} from "antd";
import React, {useEffect, useState} from "react";
import {withRouter, Link} from "react-router-dom";

const {SubMenu} = Menu;


const SideNav = props => {

	const renderMenu = (menus) => {
		{
			return menus.map((item, index) => {
				if (item.children) {
					return (
						<SubMenu
							key={item.uri}
							title={item.name}
						>
							{
								renderMenu(item.children)
							}
						</SubMenu>
					)
				} else {
					if (!item.hidden) {
						return (
							<Menu.Item key={item.uri}><Link to={item.uri}>{item.name}</Link></Menu.Item>
						)
					}
				}
			})
		}
	}


	const {menus} = props;
	const context = "";
	const handleMenuClick = ({item, key, keyPath, domEvent}) => {
		const nextPath = keyPath.reverse().join("");
		props.history.push(`${context}${nextPath}`);
	};
	const defaultKey = props.location.pathname.replace(context, "");
	// console.log('defaultKey', defaultKey);
	// if (props.location.pathname === '/') return null

	const [openKeys, setOpenKeys] = useState()

	useEffect(() => {
		// window.location ChannelConfig ManageCollectionPoints
		// console.log(123, props.location.pathname);
		['ChannelConfig', 'ManageCollectionPoints'].map(item => {
			if (props.location.pathname.indexOf(item)) {
				setOpenKeys(['/Home'])
			}
		})
	}, [])

	return (
		<Menu
			style={{height: "100%"}}
			// defaultSelectedKeys={[defaultKey]}
			selectedKeys={[props.location.pathname]}
			openKeys={openKeys}
			// defaultOpenKeys={['/Home']}
			onOpenChange={(openKeys) => {
				// console.log('openKeys', openKeys);
				setOpenKeys(openKeys)
			}}
			mode="inline"
		>
			{
				renderMenu(menus)
			}
		</Menu>
	);
};

export default withRouter(SideNav);
